<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入ElementUI样式 -->
    <link rel="stylesheet" href="elementui/index.css">
</head>
<body>
<div id="app">              <!--border:带边框  stripe：条纹-->
    <el-table  :data="tableData" border stripe height="300px"><!--添加height即可规定表头-->
        <el-table-column type="index" width="50"> </el-table-column> <!--显示索引号-->
        <el-table-column fixed prop="date" label="日期" ></el-table-column><!--fixed：固定列,默认左-->
        <el-table-column prop="name" label="姓名"></el-table-column>
        <el-table-column prop="province" label="省份" ></el-table-column>
        <el-table-column prop="city" label="城市"></el-table-column>
        <el-table-column prop="address" label="地址"></el-table-column>
        <el-table-column prop="zip" label="邮编"></el-table-column>
        <el-table-column fixed="right" label="操作" width="100"><!--设置固定在左还是右-->
            <!--
               slot-scope：作用域插槽，可以获取表格数据
               scope：代表表格数据，可以通过scope.row来获取表格当前行数据，scope不是固定写法-->
            <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                <el-button type="text" size="small">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
    <div class="block">
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="4"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="100"
                layout="sizes, prev, pager, next,->, jumper,total"
                :total="400">
        </el-pagination>
    </div>
</div>
</body>
<!--引入vue.js-->
<script src="js/vue.js"></script>
<!-- 引入ElementUI组件库 -->
<script src="elementui/index.js"></script>
<script>
    /*创建vue实例*/
    new Vue({
        el:'#app',
        data:{
            //数据
            tableData:[{
                date: '2016-05-02',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1518 弄',
                zip: 200333
            }, {
                date: '2016-05-04',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1517 弄',
                zip: 200333
            }, {
                date: '2016-05-01',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1519 弄',
                zip: 200333
            }, {
                date: '2016-05-03',
                name: '王小虎',
                province: '上海',
                city: '普陀区',
                address: '上海市普陀区金沙江路 1516 弄',
                zip: 200333
            }]
        },
        methods:{
            handleClick(row){
                alert(row.name)
            },
            handleSizeChange(){
                alert("页码改变")
            },
            handleCurrentChange(){
                alert("当前页改变")
            }
        }
    })
</script>
</html>